<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定指令 </title>
</head>
<body>
    <div id="app">
        <!-- 写死 src，不能动态改变 -->
        <img src="images/vue.png" />
        <!-- 使用 v-bind 指令，可动态改变 src -->
        <img v-bind:src="imageSrc" />
        <!-- 简写写法 -->
        <img :src="imageSrc" />
        <!-- 绑定对象，则属性值为 true 的添加，false 的不添加 -->
        <p v-bind:class="{ classA: hasA, classB: hasB }">段落 1</p>
        <!-- 绑定数组，则数组中的样式都会添加 -->
        <p v-bind:class="classArray">段落 2</p>
    </div>
    <script src=" https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                imageSrc: 'images/vue.png',
                hasA: false,
                hasB: true,
                classArray: ['classA', 'classC']
            }
        });
        setTimeout(function () {
            // 3 秒后修改图片属性值，查看图片是不是变化了 
            app.imageSrc = 'images/react.png';
        }, 3000);
    </script>
</body>

</html>